<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>校园闲置－会员登录</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
	</head>
	<body>
		<!-- login -->
		<div class="top center">
			<div class="logo center">
				<a href="index" title="校园二手商品交易平台"><img src="${pageContext.request.contextPath}/static/image/xyesjy_logo.png" alt=""></a>
			</div>
		</div>
		<form action="userLogin" method="post" id="loginForm" class="form center">
			<div class="login">
				<div class="login_center">
					<div class="login_top">
						<div class="left fl">会员登录</div>
						<div class="clear"></div>
						<div class="xian center"></div>
					</div>
					<div class="login_main center">
						<div class="username">
							账&nbsp;&nbsp;&nbsp;&nbsp;号:&nbsp;<input class="shurukuang" type="text" id="username" name="username" placeholder="手机号码/用户名"/>
							<p class="tishi" id="username-tishi"></p>
						</div>
						
						<div class="username">
							密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="shurukuang" type="password" id="password" name="password" placeholder="请输入你的密码"/>
							<p class="tishi" id="password-tishi"></p>
						</div>
						
						<div class="username" id="yan-zheng-ma-div">
							<div class="left fl">验证码:&nbsp;<input class="yanzhengma" type="text" name="code" id="code" placeholder="请输入验证码"/></div>
							<div class="right fl"><img src="getValidationCode" id="code-img" onclick="this.src='getValidationCode?' + Math.random()"></div>
							<div class="clear"></div>
							<p class="tishi" id="code-tishi"></p>
						</div>
					</div>
					<div class="login_submit">
						<input class="submit" type="button" name="submitbtn" id="submitbtn" value="立即登录" >
					</div>
					<div class="right fr lianjie"><a href="index">首页</a><a href="findPassword">忘记密码</a><a href="findusername">忘记用户名</a><a href="register" target="_self">立即注册</a></div>
				</div>
			</div>
		</form>
		<footer>
			<div class="copyright">简体 | 繁体 | English | 常见问题</div>
			<div class="copyright">xxxxxxxxxxxxxx<img src="${pageContext.request.contextPath}/static/image/ghs.png" alt="">xxxxxxxxxxxxxxxxxxxxxx</div>

		</footer>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				//隐藏验证码区 
				$("#yan-zheng-ma-div").hide();
				
				var usernameBool = false; //记录用户名是否通过
				var passwordBool = false; //记录密码是否通过
				var isInputCode = false; //记录是否需要输入验证码
				
				//用户获得焦点,初始化提示
				$("#username").focus(function(){
					$("#username-tishi").text("");
				});
				
				//密码获得焦点,初始化提示
				$("#password").focus(function(){
					$("#password-tishi").text("");
				});
				
				//用户名失去焦点（校验并且后台查询是否要输验证码）
				$("#username").blur(function(){
					var usernameVal = $("#username").val(); //获取用户名值
					var regExp = new RegExp("[ `~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】‘；：”“'。，、？]"); //用户名特殊字符校验规则
					if(regExp.test(usernameVal)){
						$("#username-tishi").text("用户名不能包含特殊字符");
						usernameBool = false;
						console.log("usernameBool:" + usernameBool);
					}else if(3 > usernameVal.length || 15 < usernameVal.length){
						$("#username-tishi").text("用户名长度为3－15个字符");
						usernameBool = false;
						console.log("usernameBool:" + usernameBool);
					}else{
						usernameBool = true;
						console.log("usernameBool:" + usernameBool);
						
						//查询是否要验证码
						$.ajax({
							url: "getUserLoginFailTime",
							type: "POST",
							dataType: "json",
							data:{
								"username": usernameVal,
							},
							success: function(data){
								if(true == data.message){ //为true则需要验证码
									isInputCode = true;
									//显示验证码区 
									$("#yan-zheng-ma-div").show();
								}else{
									isInputCode = false;
									//显示验证码区 
									$("#yan-zheng-ma-div").hide();
								}
							}
						})
					}
				});
				
				//密码失去焦点
				$("#password").blur(function(){
					var passwordVal = $("#password").val();
					if(6 > passwordVal.length || 16 < passwordVal.length){
						$("#password-tishi").text("密码长度为6－16位");
						passwordBool = false;
						console.log("passwordBool:" + passwordBool);
					}else{
						passwordBool = true;
						console.log("passwordBool:" + passwordBool);
					}
				})
				
				//点击登录按钮进行用户名和密码规则校验通过再提交
				$("#submitbtn").on("click", function(){
					if(usernameBool == true && passwordBool == true){
						if(isInputCode == false){ //不需要验证码时
							$("#code").val("no"); //no表示无验证码
							$("#loginForm").submit();
						}else{
							var codeVal = $("#code").val();
							if(codeVal == "" || codeVal == null){
								$("#code-tishi").text("请输入验证码");
								return;
							}
							$("#loginForm").submit();
						}
					}else{
						var usernameVal = $("#username").val(); //获取用户名值
						var passwordVal = $("#password").val(); //获取密码值
						if(usernameVal == '' || passwordVal == ''){
							layer.msg('请输入用户名或密码');
						}
					}
				});
				
				//按键盘回车键进行用户名和密码规则校验通过再提交
				document.onkeypress = function(){
					var e = window.event||arguments.callee.caller.arguments[0];
					//值为13时等于回车键
					if(e.keyCode == 13){
						var usernameVal = $("#username").val(); //获取用户名值
						var passwordVal = $("#password").val(); //获取密码值
						//密码校验
						if(6 > passwordVal.length || 16 < passwordVal.length){
							$("#password-tishi").text("密码长度为6－16位");
							passwordBool = false;
							console.log("passwordBool:" + passwordBool);
						}else{
							passwordBool = true;
							console.log("passwordBool:" + passwordBool);
						}
						
						//用户名校验
						var regExp = new RegExp("[ `~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】‘；：”“'。，、？]"); //用户名特殊字符校验规则
						if(regExp.test(usernameVal)){
							$("#username-tishi").text("用户名不能包含特殊字符");
							usernameBool = false;
							console.log("usernameBool:" + usernameBool);
						}else if(3 > usernameVal.length || 15 < usernameVal.length){
							$("#username-tishi").text("用户名长度为3－15个字符");
							usernameBool = false;
							console.log("usernameBool:" + usernameBool);
						}else{
							usernameBool = true;
							console.log("usernameBool:" + usernameBool);
							
							//查询是否要验证码
							$.ajax({
								url: "getUserLoginFailTime",
								type: "POST",
								dataType: "json",
								data:{
									"username": usernameVal,
								},
								success: function(data){
									if(true == data.message){ //为true则需要验证码
										isInputCode = true;
										//显示验证码区 
										$("#yan-zheng-ma-div").show();
									}else{
										isInputCode = false;
										//显示验证码区 
										$("#yan-zheng-ma-div").hide();
									}
								}
							})
						}
						if(usernameBool == true && passwordBool == true){
							if(isInputCode == false){ //不需要验证码时
								$("#code").val("no"); //no表示无验证码
								$("#loginForm").submit();
							}else{
								var codeVal = $("#code").val();
								if(codeVal == "" || codeVal == null){
									$("#code-tishi").text("请输入验证码");
									return;
								}
								$("#loginForm").submit();
							}
						}else{
							var usernameVal = $("#username").val(); //获取用户名值
							var passwordVal = $("#password").val(); //获取密码值
							if(usernameVal == '' || passwordVal == ''){
								layer.msg('请输入用户名或密码');
							}
						}
					}
				};
				
				
				//登录失败结果判断
				if("f" == "${usernameBool}"){
					$("#username-tishi").text("该用户名不存在");
				}else if("f" == "${stopSealBool}"){
					layer.open({
						  content: '该账号已被封停',
						  title: '提示:',
						  icon: 1,
						  anim: 6,
						  yes: function(index, layero){
							  layer.close(index); //如果设定了yes回调，需进行手工关闭
							  }
					});
				}else if("f" == "${codeBool}"){
					$("#code-tishi").text("验证码错误");
					$("#username").val("${username}");
					$("#password").val("${password}");
					$("#yan-zheng-ma-div").show();
					usernameBool = true;
					passwordBool = true;
					isInputCode = true;
				}else if("f" == "${needCodeBool}"){
					$("#code-tishi").text("请输入验证码");
					$("#username").val("${username}");
					$("#password").val("${password}");
					$("#yan-zheng-ma-div").show();
					usernameBool = true;
					passwordBool = true;
					isInputCode = true;
				}else if("f" == "${passwordBool}"){
					$("#password-tishi").text("账号或密码错误");
				}
				
			})
		</script>
	</body>
</html>

